<ion-header class="bp-header">
  <ion-navbar>
    <ion-title>
      <div [reveal-at-scroll-pos]="(expandableHeader.headerHeight - 200)" [scrollArea]="scrollArea">
        {{wallet?.name}}
      </div>
    </ion-title>
    <ion-buttons right class="settings-button">
      <button class="option-button disable-hover" clear *ngIf="wallet?.isComplete() && !wallet?.needsBackup && !this.currencyProvider.isCustomERCToken(this.wallet.coin)" (click)="showMoreOptions()" ion-button icon-only>
        <ion-icon name="ios-more" md="ios-more"></ion-icon>
      </button>
      <button ion-button *ngIf="wallet && wallet?.completeHistory && wallet?.completeHistory.length > 4" class="search-button disable-hover" (click)="openSearchModal()">
        <img src="assets/img/search.svg">
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content no-bounce #scrollArea [fixed-scroll-bg-color]="backgroundColor">
  <ion-refresher (ionRefresh)="doRefresh($event)" pullMin="90" pullMax="160" [ngStyle]="{'background': backgroundColor}">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <div class="wrapper">
    <expandable-header class="balance-card" [scrollArea]="scrollArea" #expandableHeader>
      <expandable-header-primary class="balance-header">

        <div *ngIf="wallet?.network == 'testnet'" class="top-notification warning">
          <a class="energized" (click)="openExternalLink('https://support.bitpay.com/hc/en-us/articles/360004102011-What-is-testnet-How-do-I-avoid-testnet-Bitcoin-scams-')">
            {{'Learn more about testnet blockchain' | translate}}
            <ion-icon name="arrow-forward"></ion-icon>
          </a>
        </div>

        <div *ngIf="lowUtxosWarning && wallet?.network == 'livenet'" class="top-notification warning">
          <a class="energized" (click)="openAddresses()">
            {{'Spending this balance will need significant Bitcoin network fees'|translate}}
            <ion-icon name="arrow-forward"></ion-icon>
          </a>
        </div>

        <div class="wallet-name">
          {{wallet?.name}}
        </div>

        <div class="balance-content" (longPress)="toggleBalance()">
          <div (tap)="updateAll(true)" *ngIf="!wallet?.balanceHidden && !wallet?.scanning && !walletNotRegistered && (wallet?.cachedStatus || wallet?.lastKnownBalance)">
            <div class="balance-str">
              <balance-to-show [balance]="getBalance()"></balance-to-show>
              <img *ngIf="wallet.coin === 'xrp'" width="21" (click)="openBalanceDetails()" src="assets/img/icon-info-blue.svg">
            </div>
            <div class="balance-alt-str" *ngIf="wallet?.cachedStatus && wallet?.cachedStatus.totalBalanceAlternative && !currencyProvider.isCustomERCToken(wallet?.coin) && wallet?.network !== 'testnet'">
              {{getAlternativeBalance()}} {{wallet?.cachedStatus.alternativeIsoCode}}
            </div>
            <div class="balance-alt-str" *ngIf="wallet?.network === 'testnet'">
              {{ 'Test Only - No Value' | translate }}
            </div>
          </div>

          <div class="balance-hidden" *ngIf="!updateStatusError && wallet?.balanceHidden  && !wallet?.scanning">
            <span class="title" translate>[Balance Hidden]</span>
            <div translate>
              Tap and hold to show
            </div>
          </div>
        </div>

        <div class="balance-scanning" *ngIf="!updateStatusError && wallet?.scanning">
          <div>
            <span class="title" translate>[Scanning Funds]</span>
            <div translate>
              Please wait...
            </div>
          </div>
        </div>

        <div class="balance-spendable" (click)="openBalanceDetails()" *ngIf="!wallet?.balanceHidden && !wallet?.scanning && !updateStatusError && showBalanceButton">
          <ion-icon ios="ios-timer-outline" md="md-timer"></ion-icon>
          <strong>
            {{wallet?.cachedStatus.spendableBalanceStr}}
          </strong>
          &nbsp;
          <span>
            ({{wallet?.cachedStatus.spendableBalanceAlternative}} {{wallet?.cachedStatus.alternativeIsoCode}})
          </span>
          &rarr;
        </div>

        <div class="balance-error" *ngIf="updateStatusError">
          <div>
            <span ion-text color="warning">{{wallet?.error}}</span>
          </div>
        </div>

        <div class="balance-error" *ngIf="walletNotRegistered">
          <div translate>
            This wallet is not registered at the given Bitcore Wallet Service (BWS). As an advice, you could delete the key, under settings and selecting the specific key, and then use the Backup to import the wallet again (under Home > Wallet Tab).
          </div>
        </div>
      </expandable-header-primary>
      <expandable-header-footer>
        <div class="wallet-info" *ngIf="wallet">
          <div class="left-buttons">
            <img class="testnet" *ngIf="wallet?.network == 'testnet'" src="assets/img/icon-wallet-testnet.svg">
            <span class="square-border" *ngIf="wallet?.network == 'testnet' && wallet?.coin == 'eth'">
              <span>KOVAN TESTNET</span>
            </span>
            <span class="square-border" *ngIf="wallet?.network == 'testnet' && wallet?.coin != 'eth'">
              <span>TESTNET</span>
            </span>
            <img class="read-only" *ngIf="!wallet?.canSign" src="assets/img/settings-icons/icon-read-only.svg">
            <span class="square-border" *ngIf="!wallet?.canSign">
              <span>READ ONLY</span>
            </span>
            <span class="square-border" *ngIf="wallet?.coin == 'btc' && wallet?.isSegwit">
              <span>SEGWIT</span>
            </span>
            <span class="square-border" *ngIf="wallet?.cachedStatus && wallet?.cachedStatus.wallet && wallet?.cachedStatus.wallet?.singleAddress && isUtxoCoin()">
              <span>AUDITABLE</span>
            </span>
            <span class="square-border" *ngIf="wallet?.usingCustomBWS">
              <span>BWS</span>
            </span>
            <img class="encrypted" *ngIf="wallet?.isPrivKeyEncrypted" src="assets/img/icon-lock-black.svg">
            <span class="square-border" *ngIf="wallet?.linkedEthWalletName">
              <span>{{'Linked to wallet: {linkedEthWalletName}' | translate : {linkedEthWalletName: wallet?.linkedEthWalletName} }}</span>
            </span>
            <span class="square-border" *ngIf="wallet?.coin === 'xrp' && wallet?.cachedStatus && wallet?.cachedStatus.lockedBalanceSat">
              <span translate>ACTIVATED</span>
            </span>
            <span class="wallet-type" *ngIf="wallet?.credentials.n > 1">
              <span>{{wallet?.m}}-{{wallet?.n}}</span>
            </span>
          </div>
          <ion-spinner name="crescent" *ngIf="shouldShowSpinner()"></ion-spinner>
        </div>
        <div class="action-buttons" [ngClass]="{'two-actions': !showBuyCrypto && !showExchangeCrypto}">

          <div class="action-btn" *ngIf="showBuyCrypto" (click)="goToBuyCryptoPage()">
            <img [src]="themeProvider.currentAppTheme == 'dark' ? 'assets/img/wallet-details/wd-buy-dm.svg' : 'assets/img/wallet-details/wd-buy.svg'" width="50">
            <div class="ellipsis">{{ 'Buy' | translate }}</div>
          </div>

          <div class="action-btn" *ngIf="showExchangeCrypto" (click)="goToExchangeCryptoPage()">
            <img [src]="themeProvider.currentAppTheme == 'dark' ? 'assets/img/wallet-details/wd-exchange-dm.svg': 'assets/img/wallet-details/wd-exchange.svg'" width="50">
            <div class="ellipsis">{{ 'Swap' | translate }}</div>
          </div>

          <div class="action-btn" (click)="goToReceivePage()">
            <img [src]="themeProvider.currentAppTheme == 'dark' ? 'assets/img/wallet-details/wd-receive-dm.svg' : 'assets/img/wallet-details/wd-receive.svg'" width="50">
            <div class="ellipsis">{{ 'Receive' | translate }}</div>
          </div>

          <div class="action-btn" (click)="goToSendPage()">
            <img [src]="themeProvider.currentAppTheme == 'dark' ? 'assets/img/wallet-details/wd-send-dm.svg' : 'assets/img/wallet-details/wd-send.svg'" width="50">
            <div class="ellipsis">{{ 'Send' | translate }}</div>
          </div>

        </div>
      </expandable-header-footer>
    </expandable-header>

    <ion-list *ngIf="wallet && wallet?.isComplete() && !walletNotRegistered && txps && txps[0]" class="tx-history">
      <ion-item-divider *ngIf="wallet?.incorrectDerivation">
        <span translate>
          WARNING: Key derivation is not working on this device/wallet?. Actions cannot be performed on this wallet?.
        </span>
      </ion-item-divider>
      <ion-item-divider class="tx-history-header tx-history-header--large">
        <span *ngIf="requiresMultipleSignatures" translate>Pending Proposals</span>
        <span *ngIf="!requiresMultipleSignatures" translate>Unsent transactions</span>
        <button ion-button clear icon-only class="txps-badge" *ngIf="txps.length > 0" (click)="openProposalsNotificationsPage()">
          <ion-badge>{{txps.length}}</ion-badge>
        </button>
      </ion-item-divider>
      <div *ngFor="let txp of txpsPending;  let i=index">
        <page-txp *ngIf="i<=2" [tx]="txp" [addressbook]="addressbook"></page-txp>
      </div>
      <ion-item *ngIf="wallet?.cachedStatus && wallet?.cachedStatus.lockedBalanceSat" class="locked-balance" (click)="openBalanceDetails()">
        <span translate>Total Locked Balance</span>
        <ion-note item-end>
          <span class="total-locked-amount">{{wallet?.cachedStatus.lockedBalanceStr}}</span>
          <div class="total-alt-locked-amount">{{wallet?.cachedStatus.lockedBalanceAlternative}}
            {{wallet?.cachedStatus.alternativeIsoCode}}</div>
        </ion-note>
      </ion-item>
    </ion-list>

    <!-- Transactions -->


    <div class="prompt-user activity-fix white-card" *ngIf="shouldShowZeroState()">
      <div class="title-icon larger-icon" *ngIf="!wallet?.credentials.multisigEthInfo">
        <img *ngIf="wallet.coin === 'xrp' && wallet.cachedStatus && !wallet.cachedStatus.lockedBalanceSat; else ghostTongue" width="42" src="assets/img/icon-warning-circled.svg" />
        <ng-template #ghostTongue>
          <img *ngIf="wallet.network === 'testnet'" src="assets/img/icon-warning-circled.svg">
          <img *ngIf="wallet.coin !== 'doge' && wallet.network === 'livenet'" src="assets/img/ghost-tongue-out.svg">
          <img *ngIf="wallet.coin === 'doge' && wallet.network === 'livenet'" src="assets/img/sad-doge.svg">
        </ng-template>
      </div>
      <div class="title-info">
        <span translate *ngIf="wallet?.coin === 'xrp' && wallet?.cachedStatus && !wallet?.cachedStatus.lockedBalanceSat; else ghostTown">XRP Minimum Balance</span>
        <ng-template #ghostTown>
          <span translate *ngIf="wallet.network === 'testnet'">Someone asked you to create this wallet?</span>
          <span translate *ngIf="!wallet?.credentials.multisigEthInfo && wallet.coin !== 'doge' && wallet.network === 'livenet'">It's a ghost town in here</span>
          <span translate *ngIf="!wallet?.credentials.multisigEthInfo && wallet.coin === 'doge' && wallet.network === 'livenet'">A dog without funds is a sad dog</span>
          <span translate *ngIf="wallet?.credentials.multisigEthInfo && wallet.network === 'livenet'">Join more Copayers</span>
        </ng-template>
      </div>
      <div class="subtitle-info">
        <span translate *ngIf="wallet?.coin === 'xrp' && wallet?.cachedStatus && !wallet?.cachedStatus.lockedBalanceSat; else noFunds">
          The XRP ledger requires that all wallets maintain a minimum balance of 20 XRP. This non-refundable 20 XRP will remain permanently locked in your wallet. Please first deposit no less than 20 XRP to activate your wallet.
        </span>
        <ng-template #noFunds>
          <span *ngIf="wallet.network === 'testnet'">
            {{ 'Testnet is an alternative {coinName} block chain meant for testing. This allows application developers and testers to experiment without having to use real {coinName}. Testnet coins are different from actual {coinName}, and do not have any value. They cannot be converted into "real" coins and cannot be exchanged or sold as they have no value.' | translate : {coinName: currencyProvider.getCoinName(wallet.credentials.coin) } }}
          </span>
          <span translate *ngIf="!wallet?.credentials.multisigEthInfo && !wallet.network === 'livenet'">
            If you have funds stored on a website then you should move them into a secure wallet... like this one!
          </span>
          <span translate *ngIf="wallet?.credentials.multisigEthInfo && !wallet.network === 'livenet'">
            Share this invitation with the Copayers who join this wallet.
          </span>
        </ng-template>
      </div>
      <div class="qr-container" *ngIf="wallet?.credentials.multisigEthInfo">
        <bp-qr-code *ngIf="wallet?.credentials.multisigEthInfo.multisigContractAddress && !useLegacyQrCode" class="card qr-card" copy-to-clipboard="{{ wallet.credentials.multisigEthInfo.multisigContractAddress }}" contents="{{ wallet.credentials.multisigEthInfo.multisigContractAddress }}" mask-x-to-y-ratio="1">
          <img [ngClass]="{'testnet': wallet.network === 'testnet'}" src="assets/img/currencies/{{ wallet.coin }}.svg" slot="icon" />
        </bp-qr-code>
        <div *ngIf="wallet?.credentials.multisigEthInfo.multisigContractAddress && useLegacyQrCode" class="card qr-card" copy-to-clipboard="{{ wallet.credentials.multisigEthInfo.multisigContractAddress }}">
          <ngx-qrcode hide-toast="true" qrc-value="{{ wallet.credentials.multisigEthInfo.multisigContractAddress }}" qrc-class="aclass" qrc-errorCorrectionLevel="M"></ngx-qrcode>
        </div>
      </div>
    </div>

    <div class="middle-message white-card" *ngIf="updateTxHistoryError" translate>
      Could not update transaction history
    </div>

    <div class="middle-message white-card" *ngIf="updatingTxHistory && (!history[0] || updatingTxHistoryProgress>4)">
      <span translate>Updating transaction history. Please stand by.</span>
      <br>
      <span translate *ngIf="updatingTxHistoryProgress>4">{{updatingTxHistoryProgress}} transactions downloaded</span>
    </div>

    <ion-list *ngIf="multisigPendingWallets && multisigPendingWallets[0]" class="bp-list">
      <ion-item-divider sticky class="tx-history-header">
        <span>{{'Pending multisig wallet' | translate }} </span>
      </ion-item-divider>
      <div *ngFor="let multisigPendingWallet of multisigPendingWallets">
        <action-card>
          <div action-card-title class="main-label">
            <div>
              {{ 'Name' }}
              <ion-note item-end>
                {{ multisigPendingWallet.walletName }}
              </ion-note>
            </div>
          </div>
          <div action-card-body>
            <div class="item">{{ 'Required Confirmations - Total Copayers' | translate }}</div>
            <ion-note item-end>
              {{ multisigPendingWallet.m }} - {{multisigPendingWallet.n}}
            </ion-note>
            <div (click)="viewTxOnBlockchain(multisigPendingWallet.txId)" class="item">
              <div>{{ 'Instantiation transaction ID' | translate }}</div>
              <ion-note item-end>
                {{ multisigPendingWallet.txId }}
              </ion-note>
            </div>
            <div (click)="viewAddressOnBlockchain(multisigPendingWallet.multisigContractAddress)" class="item">
              <div>{{ 'Contract Address' | translate }}</div>
              <ion-note item-end>
                {{ multisigPendingWallet.multisigContractAddress }}
              </ion-note>
            </div>
          </div>
          <div action-card-button>
            <ion-row>
              <ion-col>
                <button (click)="removeMultisigWallet(multisigPendingWallet.txId)" ion-button class="button-standard" color="primary" outline>
                  {{ 'Remove' | translate }}
                </button>
              </ion-col>
              <ion-col>
                <button (click)="createMultisigWallet(multisigPendingWallet)" ion-button class="button-standard" color="primary" outline>
                  {{ 'Create' | translate }}
                </button>
              </ion-col>
            </ion-row>
          </div>
        </action-card>
      </div>
    </ion-list>

    <ion-list *ngIf="history && history[0]" class="tx-history">
      <ion-item-group *ngFor="let group of groupedHistory; trackBy: trackByFn; let i = index;">

        <ion-item-divider (click)="viewOnBlockchain()" sticky class="tx-history-header">
          <span *ngIf="isDateInCurrentMonth(getDate(group[0].time))">{{ 'Recent' | translate }} </span>
          <span *ngIf="!isDateInCurrentMonth(getDate(group[0].time))">{{getDate(group[0].time) | amDateFormat:'MMMM'}}</span>
        </ion-item-divider>

        <div class="item-wrapper" *ngFor="let tx of group; trackBy: trackByFn; let i = index">

          <button ion-item (click)="itemTapped(tx)" [ngClass]="{'info-background': tx.isRBF && (tx.action === 'sent' || tx.action === 'moved'), 'warning-background': canSpeedUpTx(tx), 'danger-background': (tx.hasUnconfirmedInputs || tx.isRBF) && (tx.action === 'received' || tx.action === 'moved')}">
            <ion-icon class="item-img" item-start>
              <div *ngIf="tx.confirmations <= 0">
                <img src="assets/img/tx-action/icon-confirming.svg" width="40">
              </div>
              <div *ngIf="tx.confirmations > 0">
                <span *ngIf="(wallet?.coin === 'eth' || currencyProvider.isERCToken(wallet?.coin)) && tx.error; else noError">
                  <img src="assets/img/failed-icon.svg">
                </span>
                <ng-template #noError>
                  <span *ngIf="tx.customData && tx.customData.service && tx.action == 'sent'">
                    <img class="icon-services" style="padding: 5px;" src="assets/img/wallet-connect/wallet-connect-grey.svg" *ngIf="tx.customData.service == 'walletConnect'" width="15">
                    <img class="icon-services" src="assets/img/shapeshift/icon-shapeshift.svg" *ngIf="tx.customData.service == 'shapeshift'" width="40">
                    <img class="icon-services" src="assets/img/exchange-crypto/changelly-icon.svg" *ngIf="tx.customData.service == 'changelly'" width="40">
                    <img class="icon-services" src="assets/img/exchange-crypto/1inch-icon.svg" *ngIf="tx.customData.service == 'oneInch'" width="40">
                    <img-loader class="icon-services" *ngIf="tx.customData.service === 'amazon'" src="https://bitpay.com/gift-cards/assets/amazoncom/icon.svg" width="40" fallbackUrl="assets/img/gift-cards/gift-cards-icon.svg"></img-loader>
                    <img-loader class="icon-services" *ngIf="tx.customData.service === 'mercadolibre'" src="https://bitpay.com/gift-cards/assets/mercadolivre/icon.svg" width="40" fallbackUrl="assets/img/gift-cards/gift-cards-icon.svg"></img-loader>
                    <img-loader class="icon-services" *ngIf="tx.customData.service === 'coinbase'" src="assets/img/coinbase/coinbase-icon.png" width="40" fallbackUrl="assets/img/gift-cards/gift-cards-icon.svg"></img-loader>
                    <ng-container *ngIf="supportedCards | async as cardConfig">
                      <img-loader class="icon-services" *ngIf="tx.customData.service === 'giftcards'" [src]="cardConfig[tx.customData.giftCardName]?.icon" width="40" fallbackUrl="assets/img/gift-cards/gift-cards-icon.svg"></img-loader>
                    </ng-container>
                    <img class="icon-services" src="assets/img/bitpay-card/icon-bitpay.svg" *ngIf="tx.customData.service == 'debitcard'" width="40">
                  </span>
                  <span *ngIf="tx.customData && tx.customData.toWalletName && !tx.customData.service">
                    <img class="icon-services" src="assets/img/icon-wallet-reverse.svg" *ngIf="tx.action == 'sent'" width="40">
                  </span>
                  <span *ngIf="!tx.customData || (tx.customData && !tx.customData.service && !tx.customData.toWalletName)">
                    <img src="assets/img/tx-action/icon-sent.svg" *ngIf="tx.action == 'sent'" width="40">
                  </span>
                  <span>
                    <img src="assets/img/tx-action/icon-received.svg" *ngIf="tx.action == 'received'" width="40">
                    <img src="assets/img/tx-action/icon-moved.svg" *ngIf="tx.action == 'moved'" width="40">
                  </span>
                </ng-template>
              </div>
            </ion-icon>

            <div class="action" *ngIf="tx.confirmations <= 0 && !(tx.amount === 0 && wallet?.coin === 'eth')">
              <span *ngIf="(tx.action == 'sent') && !(addressbook && tx.outputs[0] && getContactName(tx.outputs[0].address))">{{'Sending'
                    | translate}}
              </span>
              <span *ngIf="(tx.action == 'moved') && !(addressbook && tx.outputs[0] && getContactName(tx.outputs[0].address))">{{'Moving'
                    | translate}}</span>
              <span *ngIf="(tx.action == 'sent' || tx.action == 'moved') && (addressbook && tx.outputs[0] && getContactName(tx.outputs[0].address))">{{getContactName(tx.outputs[0].address)}}</span>
              <span *ngIf="tx.action == 'received'">{{'Receiving' | translate}}</span>
            </div>

            <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'received'">
              <span *ngIf="(!tx.note || (tx.note && !tx.note.body)) && (!addressbook || !tx.outputs[0] || !getContactName(tx.outputs[0].address))">{{'Received'
                    | translate}}</span>
              <span *ngIf="tx.note && tx.note.body != ''">{{tx.note.body}}</span>
              <span *ngIf="(!tx.note || (tx.note && !tx.note.body)) && addressbook && tx.outputs[0] && getContactName(tx.outputs[0].address)">
                {{getContactName(tx.outputs[0].address)}}
              </span>
            </div>

            <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'sent' && !(tx.amount === 0 && wallet?.coin === 'eth')">
              <span *ngIf="(tx.message && (tx.note && !tx.note.body)) && (!addressbook || !tx.outputs[0] || !getContactName(tx.outputs[0].address)) && (!tx.customData || !tx.customData.toWalletName)" translate>Sent</span>
              <span *ngIf="!tx.message && (!tx.note || (tx.note && !tx.note.body)) && (!addressbook || !tx.outputs[0] || !getContactName(tx.outputs[0].address)) && (!tx.customData || !tx.customData.toWalletName)">{{'Sent'
                    | translate}}</span>
              <span *ngIf="!tx.message && (!tx.note || (tx.note && !tx.note.body)) && (!addressbook || !tx.outputs[0] || !getContactName(tx.outputs[0].address)) && (tx.customData && tx.customData.toWalletName)">
                {{ 'Sent to {walletName}' | translate: {walletName: tx.customData.toWalletName} }}
              </span>
              <span *ngIf="!tx.note && tx.message">{{tx.message}}</span>
              <span *ngIf="tx.note && tx.note.body != ''">{{tx.note.body}}</span>
              <span *ngIf="!tx.message && addressbook && tx.outputs[0] && getContactName(tx.outputs[0].address)">
                {{getContactName(tx.outputs[0].address)}}
              </span>
            </div>

            <div class="action" *ngIf="tx.amount === 0 && wallet?.coin === 'eth'">
              <span>{{'Interaction with contract' | translate}}</span>
            </div>

            <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'moved'">
              <span *ngIf="(tx.message && (tx.note && !tx.note.body))" translate>Sent to self</span>
              <span *ngIf="((!tx.note || (tx.note && !tx.note.body)) && !tx.message)" translate>Sent to self</span>
              <span *ngIf="!tx.note && tx.message">{{tx.message}}</span>
              <span *ngIf="tx.note && tx.note.body != ''">{{tx.note.body}}</span>
            </div>

            <div class="action" *ngIf="tx.confirmations > 0 && tx.action == 'invalid'">
              <span class="assertive" *ngIf="!tx.message && !tx.note" translate>Invalid</span>
            </div>

            <ion-note item-end text-end>
              <div class="amount">
                <span [ngClass]="{'received': tx.action == 'received'}" *ngIf="tx.action != 'invalid' && !(tx.amount === 0 && wallet?.coin === 'eth')">{{tx.amount |
                      satToUnit: wallet?.coin}}</span>
                <span *ngIf="tx.amount === 0 && wallet?.coin === 'eth'">{{tx.fees | satToUnit: wallet?.coin}}</span>
                <span class="double-spend" *ngIf="tx.action == 'invalid'" translate>(possible double spend)</span>
              </div>
              <div class="date">
                <span *ngIf="tx.time && createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amTimeAgo}}</span>
                <span *ngIf="tx.time && !createdWithinPastDay(tx.time * 1000)">{{tx.time * 1000 | amDateFormat:'MMM
                      D, YYYY'}}</span>
              </div>
            </ion-note>
          </button>
        </div>
      </ion-item-group>
    </ion-list>

    <ion-infinite-scroll (ionInfinite)="loadHistory($event)" *ngIf="!shouldShowZeroState()">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </div>
</ion-content>
